<template>

  <div>
    <el-form-item
      label="公司标题"
      prop="title"
    >
      <el-input
        v-model="form.header.title"
        clearable
        placeholder="公司标题"
      />
    </el-form-item>

    <el-form-item
      label="logo"
      prop="title"
    >
      <el-upload
        :show-file-list="false"
        :on-success="(response)=>imageApi.onSuccess(response)"
        :http-request="(e)=>imageApi.onHttpRequest(e)"
      >
        <div class="d-flex avatar-uploader" style="">
          <img
            v-if="imageApi.img.src"
            :src="imageApi.img.src"
            alt="logo"
            class="avatar"
            width="160"
            height="160" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </div>
      </el-upload>
    </el-form-item>

  </div>
</template>

<script setup lang="ts">
import { SettingType } from "~/api/system/company/types";
import { Plus } from "@element-plus/icons-vue";
import { ImageApi } from "~/api/system/file/image.api";
import { onMounted, watch } from "vue";

interface Props {
  form: SettingType;
}

const { form } = withDefaults(defineProps<Props>(), {});
const imageApi = new ImageApi();
onMounted(() => {
  imageApi.init();
  imageApi.getImg(form.header.logo as any).then(src => {
    // @ts-ignore
    imageApi.img.src = src;
    imageApi.img.value = form.header.logo as any;
  });
});

watch(() => imageApi.img.src, (value) => {
  if (value) {
    form.header.logo = imageApi.img.value as any;
  }
});
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 162px;
  height: 162px;
  text-align: center;
}

.avatar-uploader {
  border-width: 1px;
  border-style: dashed;
  border-radius: 4px;
  border-color: var(--el-border-color);

  &:hover {
    border-color: var(--el-border-color-hover);
  }
}
</style>
